<template>
	<view class="content fofa poRel" style="background-color: #ccc;">
		<tabnav title="设置签署区域" :col="back"></tabnav>
		<view class="" style="display: flex;flex-direction: column;align-items: center;background: #ececec;">
			<movable-area v-for="(item,index) in pdfimglist"
				style="background: #fff;margin: 0px auto;margin-top: 20rpx;height: 500px;"
				:style="{'width':imgwidth+'px'}">
				<image :src="aurl+item" mode="" style="width: 100%;height: 1000rpx"></image>
				<movable-view @change="tuodong" :data-id="ids" :x="its.componentPoeX" :y="its.componentPoeY" direction="all" style="width: 70px;height: 50px;" v-if="its.componentPage == index+1 && its.type == 'fqf'"
					v-for="(its,ids) in sign_control">
					<view class="abox" style="position: relative;">
						<view class="dbox">
							<view>签名/盖章</view>
							<view>{{initiator_user.approveName}}</view>
						</view>
						<view style="text-align: right;margin-right: 7rpx;display: flex;justify-content: flex-end;">
							<view style="margin-right: 15rpx;">年</view>
							<view style="margin-right: 15rpx;">月</view>
							<view style="margin-right: 15rpx;">日</view>
						</view>
						<view class="xuanfuguanbi" @click="delcontrol(ids)">
							<img :src="aurl+icon_list.guanbi2" alt="" style="width: 100%;height: 100%;" />
						</view>
					</view>
				</movable-view>
				<movable-view @change="tuodong" :data-id="ids" :x="its.componentPoeX" :y="its.componentPoeY" direction="all" style="width: 70px;height: 50px;" v-if="its.componentPage == index+1 && its.type == 'qsf'"
					v-for="(its,ids) in sign_control">
					<view class="abox" style="position: relative;border: 1rpx solid #4ba79c;">
						<view class="dbox" style="background-color: #afe5de;color:#4ba79c">
							<view>签名/盖章</view>
							<view>签署人</view>
						</view>
						<view style="text-align: right;margin-right: 7rpx;display: flex;justify-content: flex-end;">
							<view style="margin-right: 15rpx;">年</view>
							<view style="margin-right: 15rpx;">月</view>
							<view style="margin-right: 15rpx;">日</view>
						</view>
						<view class="xuanfuguanbi" @click="delcontrol(ids)">
							<img :src="aurl+icon_list.guanbi2" alt="" style="width: 100%;height: 100%;" />
						</view>
					</view>
				</movable-view>
				<movable-view @change="tuodong" :data-id="ids" :x="its.componentPoeX" :y="its.componentPoeY" direction="vertical" 
					style="width: 70px;height: 40px;" v-if="its.componentPage == index+1 && its.type == 'fqfz'"
					v-for="(its,ids) in sign_control">
					<view class="abox1" style="position: relative;">
						<view class="dbox">
							<view>骑缝章</view>
							<view>{{initiator_user.approveName}}</view>
						</view>
						<view class="xuanfuguanbi" @click="delcontrol(ids)">
							<img :src="aurl+icon_list.guanbi2" alt="" style="width: 100%;height: 100%;" />
						</view>
					</view>
				</movable-view>
				<movable-view @change="tuodong" :data-id="ids" :x="its.componentPoeX" :y="its.componentPoeY" direction="vertical"
					style="width: 70px;height: 40px;" v-if="its.componentPage == index+1 && its.type == 'qqfz'"
					v-for="(its,ids) in sign_control">
					<view class="abox1" style="position: relative;border: 1rpx solid #4ba79c;">
						<view class="dbox" style="background-color: #afe5de;color:#4ba79c">
							<view>骑缝章</view>
							<view>签署人</view>
						</view>
						<view class="xuanfuguanbi" @click="delcontrol(ids)">
							<img :src="aurl+icon_list.guanbi2" alt="" style="width: 100%;height: 100%;" />
						</view>
					</view>
				</movable-view>
			</movable-area>

			<view class="" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}" style="height: 550rpx;"></view>
		</view>
		<view class="fenye">
			{{img_page}}/{{pdfimglist.length}}
		</view>
		<view class="" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}" style="position: fixed;bottom: 0px;left: 0;width: 100%;background: #fff;">
			<view class="" style="padding-bottom: 20rpx;display: flex;flex-direction: column;">
				<view class="cbox" @click="opensignarea = !opensignarea" >
					<image v-if="!opensignarea" :src="aurl+icon_list.shang" mode=""
						style="height: 30rpx;width: 60rpx;"></image>
					<image v-else :src="aurl+icon_list.xia" mode=""
						style="height: 30rpx;width: 60rpx;"></image>
				</view>
				<view class="" style="border-bottom: 1rpx solid #f3f3f3;width: 100%;margin-top: 10rpx;"></view>
				
				<scroll-view v-if="opensignarea" scroll-y="true" style="height: 295rpx;">
					<view class="dis disAl disJuC" style="text-align: center;margin-top: 15rpx;margin-bottom: 15rpx;height: 45rpx;"
						:style="{'color':back}">
						添加签署区
					</view>
					<view class="qsqbox">
						<view class="qsq" style="position: relative;" @click="add_box('fqf')">
							<image class="" style="width: 100%;height: 100%;" :src="aurl+icon_list.fqfqsr" mode=""></image>
							<view class="" style="position: absolute;top: 30%;left: 35%;">
								{{initiator_user.approveName}}
							</view>
						</view>
						<view class="qsq" style="position: relative;" @click="add_box('qsf')">
							<image class="" style="width: 100%;height: 100%;" :src="aurl+icon_list.qsfqsr" mode=""></image>
							<view class="" style="position: absolute;top: 30%;left: 33%;">
								签署人
							</view>
						</view>
					</view>
					<view class="dis disAl disJuC" style="text-align: center;margin-top: 15rpx;margin-bottom: 15rpx;height: 45rpx;"
						:style="{'color':back}">
						非必填签署区
					</view>
					<view class="qsqbox">
						<view class="qsq" style="position: relative;" @click="add_box('fqfz')">
							<image class="" style="width: 100%;height: 100%;" :src="aurl+icon_list.fqfqsr" mode=""></image>
							<view class="" style="position: absolute;top: 30%;left: 35%;">
								骑缝章
							</view>
						</view>
						<view class="qsq" style="position: relative;" @click="add_box('qqfz')">
							<image class="" style="width: 100%;height: 100%;" :src="aurl+icon_list.qsfqsr" mode=""></image>
							<view class="" style="position: absolute;top: 30%;left: 33%;">
								骑缝章
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="xyb" style="margin-bottom: 30rpx;" @click="savedata" :style="{'background-color':back,'color':backTwo}">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	export default {
		components: {
			tabnav,
		},
		data() {

			return {
				paddingBottomHeight: 0,
				aurl: this.global.url,
				opensignarea: true,
				scrollTop: 0, // 初始滚动位置为0
				aurl: this.global.url,
				back: uni.getStorageSync('back'),
				backTwo: uni.getStorageSync('backTwo'),
				pdfimglist: [],
				img_page: 1,
				imgwidth: 0,
				drag_data: [{
					type: '',
					pos_x: '',
					pos_y: ''
				}],
				icon_list: {
					shang: '/addon/qianyu_dzq/wechatimg/shang.png',
					xia: '/addon/qianyu_dzq/wechatimg/xia.png',
					fqfqsr: '/addon/qianyu_dzq/wechatimg/fqfqsr.png',
					qsfqsr: '/addon/qianyu_dzq/wechatimg/qsfqsr2.png',
					guanbi2: '/addon/qianyu_dzq/wechatimg/guanbi2.png'
				},
				sign_control: [

				],
				signlist: [
				
				],
				initiator_user: {}, // 发起人
				signedby_user: {}, // 签署人
				drafts_data:{}, // 合同所有信息
				// 判断是否还在继续输入
				timer: null,
				biX: 0,
				biY: 0
			}
		},
		onPageScroll(e) {
			// 获取页面滚动的位置
			this.scrollTop = e.scrollTop;
			let page = parseInt(this.scrollTop / 370) + 1
			if (page <= this.pdfimglist.length) {
				this.img_page = page > 0 ? page : 1
			} else {
				this.img_page = this.pdfimglist.length
			}

		},
		onShow() {
			this.initiator_user = uni.getStorageSync('initiator_user')
			console.log('发起方人员')
			console.log(this.initiator_user)
			this.signedby_user = uni.getStorageSync('signedby_user')
			this.drafts_data = uni.getStorageSync('drafts_data')
			// 重新拉取PDF文件
			this.pdf_to_img()
		},
		onLoad() {
			let _self = this
			uni.getSystemInfo({
				success: function(info) {
					_self.imgwidth = info.windowWidth - 20
				}
			});
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function (res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		methods: {
			// 保存
			savedata(){
				let _self = this
				
				let signedby = _self.drafts_data.flowApproverInfo
				_self.signlist = JSON.parse(JSON.stringify(_self.sign_control));
				console.log(_self.signlist)
				// 先清空控件
				
				for(var d=0;d<signedby.length;d++){
					signedby[d].signComponents = []
				}
				
				
				
				
				
				console.log(_self.signlist)
				
				for(var i=0;i<signedby.length;i++){
					let result = signedby[i]
					console.log(result.isPromoter)
					// console.log(_self.signlist)
					if(result.isPromoter == 0){
						// 发起方
						for(var c = 0;c < _self.signlist.length;c++){
							 console.log(_self.signlist[c]['type'])
							 
							if(_self.signlist[c]['type'] == 'fqf'){
								console.log('追加fqf')
								result.signComponents.push(_self.signlist[c]) // 追加签章控件
								_self.$delete(_self.signlist[c],"type")
							}
							
						}
					
					}else{
						
						// 签署方 
						for(var c = 0;c<_self.signlist.length;c++){
							// _self.$delete(signlist[c],"dateTime")
							console.log(_self.signlist[c]['type'])
							if(_self.signlist[c]['type'] == 'qsf'){
								console.log('追加啊')
								result.signComponents.push(_self.signlist[c]) // 追加签章控件
								_self.$delete(_self.signlist[c],"type")
							}
							
						}
					}
					signedby[i] = result
				}
				_self.drafts_data.flowApproverInfo = signedby
				console.log(_self.drafts_data)
				_self.tijiao()
			},
			tijiao(){
				let that = this
				uni.showLoading({
					title:'加载中...'
				})
				uni.request({
					url: that.global.url + 'api/qianyu_dzq/applet_files_contracts',
					method: 'GET',
					header: {
						'site-id': that.global.site_id,
						
						'token': uni.getStorageSync('inuse_userinfo_token')
					},
					data: {
						contract_json: JSON.stringify(that.drafts_data), // 合同流程id
					},
					success(res) {
						uni.hideLoading()
						console.log(res)
						if (res.data.code == 1) {
							// 保存成功
							//清除已经缓存的信息
							uni.removeStorageSync('initiator_user');
							uni.removeStorageSync('signedby_user');
							uni.removeStorageSync('drafts_data');
							uni.removeStorageSync('initiator');
							// 存id跳转
							uni.setStorageSync('flowId', res.data.data)
						
							uni.redirectTo({
								url:'/pages/template/replenishOne'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							})
						}
				
					},
					complete() {
						
					},fail() {
						uni.hideLoading()
					}
					
				})
			},
			delcontrol(e){
				this.sign_control.splice(e,1)
			},
			// 拖动
			tuodong(e){
				var that = this
				if (that.timer !== null) clearTimeout(that.timer)
				that.timer = setTimeout(() => {
					that.sign_control[e.target.dataset.id]['componentPoeX'] = e.detail.x
					that.sign_control[e.target.dataset.id]['componentPoeY'] = e.detail.y
					uni.getImageInfo({
						src: that.aurl+that.pdfimglist[0],
						success: function(imag){
							if(that.sign_control[e.target.dataset.id]['type'] != 'fqfz' && that.sign_control[e.target.dataset.id]['type'] != 'qqfz'){
								console.log((e.detail.x / (that.imgwidth / 100) / 100))
								that.sign_control[e.target.dataset.id]['componentPosX'] = 590 * (e.detail.x / (that.imgwidth / 100) / 100)
							}
							console.log((e.detail.y / (500 / 100) / 100))
							that.sign_control[e.target.dataset.id]['componentPosY'] = 840 * (e.detail.y / (500 / 100) / 100)
							console.log(that.sign_control[e.target.dataset.id]['componentPosX'])
							console.log(that.sign_control[e.target.dataset.id]['componentPosY'])
						}
					})
					// if(that.sign_control[e.target.dataset.id]['type'] != 'fqfz' && that.sign_control[e.target.dataset.id]['type'] != 'qqfz'){
					// 	that.sign_control[e.target.dataset.id]['componentPosX'] = e.detail.x + 60
					// 	if(that.sign_control[e.target.dataset.id]['type'] == 'qsf'){
					// 		that.sign_control[e.target.dataset.id]['componentPosX'] = e.detail.x + 105
					// 	}
					// }
					// that.sign_control[e.target.dataset.id]['componentPosY'] = e.detail.y + 255
				}, 500)
				// console.log(e)
			},
			// 添加控件
			add_box(type) {
				console.log(type)
				if (type == 'qsf') {
					let arr = {
						componentType: this.signedby_user.approverType == 'PERSON' ? 'SIGN_SIGNATURE' : 'SIGN_SEAL', // 个人不支持印章，支持签名
						componentName: '签章',
						componentRequired: true,
						componentWidth: 100,
						componentHeight: 100,
						componentPage: this.img_page,
						componentPoeX: 0,
						componentPoeY: 0,
						componentPosX: 0,
						componentPosY: 0,
						componentExtra: [{
							"Font": "黑体"
						}],
						componentValue: "",
						componentDateFontSize: 12,
						type: 'qsf',
						
					}
					this.sign_control.push(arr)
				} else if (type == 'fqfz') {
					let arr = {
						componentType: 'SIGN_PAGING_SEAL', // 个人不支持印章，支持签名
						componentName: '骑缝章',
						componentRequired: true,
						componentWidth: 100,
						componentHeight: 100,
						componentPage: this.img_page,
						componentPoeX: 600,
						componentPoeY: 200,
						componentPosY: 0,
						componentExtra: [{
							"Font": "黑体"
						}],
						componentValue: "",
						componentDateFontSize: 12,
						type: 'fqfz',
						
					}
					this.sign_control.push(arr)
				} else if (type == 'qqfz') {
					let arr = {
						componentType: 'SIGN_PAGING_SEAL', // 个人不支持印章，支持签名
						componentName: '骑缝章',
						componentRequired: true,
						componentWidth: 100,
						componentHeight: 100,
						componentPage: this.img_page,
						componentPoeX: 600,
						componentPoeY: 100,
						componentPosY: 0,
						componentExtra: [{
							"Font": "黑体"
						}],
						componentValue: "",
						componentDateFontSize: 12,
						type: 'qqfz',
						
					}
					this.sign_control.push(arr)
				} else {
					let arr = {
						componentType: 'SIGN_SEAL', // 控件类型，印章
						componentName: '签章',
						componentRequired: true,
						componentWidth: 100,
						componentHeight: 100,
						componentPage: this.img_page,
						componentPoeX: 200,
						componentPoeY: 200,
						componentPosX: 200,
						componentPosY: 200,
						componentExtra: [{
							"Font": "黑体"
						}],
						componentValue: "",
						componentDateFontSize: 12,
						type: 'fqf'
					}
					this.sign_control.push(arr)
				}
				
			},
			pdf_to_img() {
				let that = this
				uni.request({
					url: that.global.url + 'api/qianyu_dzq/applet_drafts_pdftoimg',
					method: 'GET',
					header: {
						'site-id': that.global.site_id,
						'token': uni.getStorageSync('inuse_userinfo_token')
					},
					data: {
						fileids: uni.getStorageSync('file_contract_id'), // 合同流程id
					},
					success(res) {
						console.log(res)
						if (res.data.code == 1) {
							// 保存成功
							that.pdfimglist = res.data.data
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							})
						}

					},
					complete() {}
				})
			},
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		/* background-color: #F4F3F3; */
	}

	.xyb {

		text-align: center;
		min-height: 80rpx;
		line-height: 80rpx;
		width: 95%;
		margin: 0px auto;
		/* background: #4fc1b2; */
		color: #fff;

	}

	.fenye {
		position: fixed;
		top: 12%;
		right: 14px;
		padding: 5px 10px;
		background: #000;
		color: #fff;
		border-radius: 10rpx;
		opacity: 0.6;
	}

	.qsq {
		width: 258rpx;
		height: 130rpx;
	}

	.qsqbox {
		display: flex;
		justify-content: space-around;
		margin: 20rpx;
	}

	.cbox {
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #f3f3f3;
		padding-top: 15rpx;
	}

	.dbox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #eeda84;
		background-color: #faefdb;
		margin: 10rpx 10rpx 0rpx 10rpx;
		;
		padding: 5rpx;
		text-align: center;
	}

	.abox {
		width: 70px;
		height: 55px;
		font-size: 10px;
		border: 1px solid #eeda84;
		border-radius: 2px;
	}
	.abox1 {
		width: 70px;
		height: 43px;
		font-size: 10px;
		border: 1px solid #eeda84;
		border-radius: 2px;
	}

	.xuanfuguanbi {
		width: 56rpx;
		height: 50rpx;
		position: absolute;
		top: -16px;
		right: -17px;
	}
</style>